<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" href="">
    <link rel="stylesheet" href="css/RedCss.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/resize.js"></script>
    <script src="js/jq.js"></script>
    <title></title>
</head>

<body>
<div id="page" class="red">
    <div id="index" class='animated fadeOutLeft'>
        <!--表头 -->
        <header>
            <h1>AI无纸化会议系统</h1>
            <span class="RedBlock"></span><span></span>
            <div></div>
        </header>
        <!-- 信息 -->
        <div class="MeetingInfor">
            <h1>小兵第53次周例会</h1>
            <ul>
                <li>
                    <img src="./img/compere.png" alt="">
                    <span class="LiSpan">主 <span class="RedCompere">持：</span> </span><span>__</span>
                </li>
                <li>
                    <img src="./img/red/time.png" alt="" class="MeetingTimeIcon">
                    <span class="LiSpan">会议时间：</span> <span>09:00-11:00</span>
                </li>
                <li>
                    <img src="./img/weather.png" alt="" class="MeetingWeather">
                    <span class="LiSpan">空气质量：</span><span>良好</span>
                </li>
            </ul>
            <!-- 通知栏 -->
            <div class="board">
                <div class="boardSon">
                    <span class="boardTitle">会议公告</span><span class="boardContent">议题： 1、上周会议纪要复盘。2、张显东总复盘。3、大张总讲话。4、销售（1月15日OKR，针对4个产品的计划，2020OKR）。5、各部门2020 OKR、及一月份的工作计划</span>
                </div>
                <div class="humidity">
                    <p>湿度：<span>25%</span></p>
                    <p>温度：<span>25℃</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 会议列表 -->
    <div id="list" class='animated fadeInRight'>
        <div class="heard">
            <img src="./img/red/top-bg.png" alt="" class="HeardImg">
        </div>
        <div class="RedListTime">
            <h1>小兵第53次周例会</h1>
        </div>
        <div class="RedList">
            <p class="RedListDate">2019年10月20日 星期三</p>
            <p class="RedSecond">19:00:00</p>
        </div>
        <!-- 签到框 -->
        <div class="RedSign">
            <div class="RedSignInfor">
                <ul>
                    <li class="AlreadySign">
                        <img src="./img/people.png" alt="">
                        参会人员
                    </li>
                </ul>
            </div>
        </div>
        <!-- 已签到列表 -->
        <div class="RedSignBule">
            <div class="RedSignInfor">
                <ul>
                    <li class="AlreadySign">
                        <img src="./img/success.png" alt="">
                        已签到
                    </li>
                </ul>
            </div>
        </div>
        <!-- 人脸抓拍 -->
        <div class="RedFace">
            <video id="video1" autoplay muted poster="./img/Demo.jpg"></video>
        </div>
        <!-- 会议 -->
        <div class="RedMeeting">
            <!-- 公告内容 -->
            <div class="MettingContent">
                <h1 class="bar">会议公告</h1>
                <div class="MettingContentText">
                    议题：<br>
                    1、上周会议纪要复盘。2、张显东总复盘。3、大张总讲话。<br>
                    4、销售（1月15日OKR，针对4个产品的计划，2020OKR）。<br>
                    5、各部门2020 OKR、及一月份的工作计划
                </div>
            </div>

            <div class="InforConten">
                <h1 class="bar">会议信息</h1>
                <ul class="mess">
                    <li>
                        <img src="./img/red/time.png" alt="" class="infroTimeIcon">
                        会议时间：<span>09:00-11:00</span>
                    </li>
                    <li></li>
                    <li>
                        <img src="./img/compere.png" alt="">
                        主 &nbsp;&nbsp; &nbsp;&nbsp; 持：<span>__</span>
                    </li>
                </ul>
            </div>

            <div class="DataConten">
                <h1 class="bar">监测数据</h1>
                <ul class="mess">
                    <li>温&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度：<span>26℃</span></li>
                    <li>湿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度：<span>50%</span></li>
                    <li>空气质量：<span>良好</span></li>
                </ul>
            </div>
        </div>
        <!-- 人脸签到成功弹出框 -->
        <div class="RedPop">
            <!-- 人脸 -->
            <img src="./img/Demo.jpg" alt="" class="heardImg">
            <!-- 成功 -->
            <img src="./img/success.png" alt="" class="succeed">
            <div class="staff">
                <!-- 名字 -->
                <p class="name">__</p>
                <p class="tishi">欢迎参会</p>
                <p class="timeX">签到时间00:00:00</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/wfs.js"></script>
<script src="./js/js.js"></script>
<script>
    var a = 0;
    var wfs = null;
    if (Wfs.isSupported()) {
        wfs = new Wfs();
        wfs.attachMedia(video1,'ch1','H264Raw',VIDEO);
    } else {
        window.alert('浏览器不支持！\n支持win8/win10的ie11(需安装更新)和edge\n支持chrome/safari/firefox等较新版本\n如果使用360等多内核浏览器，请保持更新并切换极速模式');
    }
    $(function () {
        //红色的布局
        if (get_href('theme') != 1) {
            $('#page').addClass('blue');
            $('.HeardImg').attr('src', './img/blue/top-bg.png');
            //更换会议信息时间的图片
            $('.infroTimeIcon').attr('src', './img/blue/time.png');
        }
        getData();
        date();
        setInterval(date,1000);
        let Socket=new WebSocket(SOCKET);
        Socket.onmessage=res=>{
            if(res.data.indexOf('{')>-1){
                let data=eval('('+res.data+')');
                if(data.status==1) getData()
            }
            console.log('socket:'+res.data);
        };
    });

    //时间展示
    let date=()=>{
        //补0
        let zero=v=>v<10?'0'+v:v;
        let week=['日','一','二','三','四','五','六'];
        //时间
        $('.RedSecond').text(new Date().toTimeString().split(' ')[0] || '__');
        //日期
        $('.RedListDate').text(`${new Date().getFullYear()}年${zero(new Date().getMonth()+1)}月${zero(new Date().getDate())}日 星期${week[new Date().getDay()]}`);
    };

    let getData = () => {
        ajax('getPersonnelList', {}, v => {
            if (v.code == 0 && v.data.length>0) {
                let arrive=v.data.filter(o=>o.isArrive==1);
                let unarrive=v.data.filter(o=>o.isArrive==0);
                let join=`<li class="AlreadySign"><img src="./img/people.png" alt="">参会人员</li>`;
                let signIn = `<li class="AlreadySign"><img src="./img/success.png" alt="">已签到</li>`;
                for (let i = 0; i < arrive.length && i < 3; i++) {
                    let x = arrive[i];
                    signIn += `<li class="AlreadySignList1"><div class="List"><img src="${IMAGE + x.samplePhoto + '&type=0'}" alt=""><p class="Bluename">${x.name || '__'}</p><p class="section">${x.identity || '__'} <span>${x.updatedTime.split(' ')[1] || '__'}</span></p></div></li>`
                }
                for (let i = 0; i < arrive.length && i < 4; i++) {
                    let x = arrive[i];
                    join += `<li class="AlreadySignList"><div class="List"><img src="./img/person.png" alt=""><span>${x.name || '__'}</span><span class="signIn">已签到</span></div><div class="AlreadySignListBG"></div></li>`
                }
                for (let i = 0; i < unarrive.length && i < 2; i++) {
                    let x = unarrive[i];
                    join += `<li class="AlreadySignList nosign"><div class="List"><img src="./img/person.png" alt=""><span>${x.name || '__'}</span><span class="signIn">未签到</span></div><div class="AlreadySignListBG"></div></li>`
                }
                $('.RedSignBule ul').html(signIn);
                $('.RedSign ul').html(join);
                if(arrive.length>0){
                    let first=arrive[0];
                    if($('.RedPop').attr('data-id')!==first.id){
                        $('.RedPop').stop().fadeOut(200,function(){
                            $('.RedPop').attr('data-id',first.id)
                            //$('.RedFace img').attr('src',IMAGE+first.grabPhoto+'&type=1');
                            $('.heardImg').attr('src',IMAGE+first.samplePhoto+'&type=0');
                            $('.staff .name').text(first.name);
                            $('.staff .timeX').text('签到时间:'+first.updatedTime.split(' ')[1]);
                            $('.RedPop').fadeIn(200);
                            setTimeout(()=>{$('.RedPop').fadeOut(200)},5000)
                        })
                    }
                }
            }
        })
    };
</script>

</html>
